<template>
  <div>
    <Card class="warp-card" dis-hover>
      <Form :label-width="160" :model="form" :rules="ruleInline">
        <FormItem class="marginBottom20" label="邮件提醒（超时天数）" prop="time">
          <Input type="number" class="addressWidth" placeholder="" style="width: 100px" v-model="form.time"></Input>
          <span style="margin-left:10px">天</span>
        </FormItem>
        <FormItem>
          <Button
            :loading="isShowSaveButtonLoading"
            @click="addOrUpdateEmail"
            type="primary"
            v-privilege="'email-alert-config-save'"
          >保存</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import WangEditor from 'wangeditor';
import Cookies from 'js-cookie';
import config from '@/config';
import { fileApi } from '@/api/file';
import { emailApi } from '@/api/email';

export default {
  name: 'SendMail',
  components: {},
  props: {},
  data () {
    let baseUrl = process.env.VUE_APP_URL;
    return {
      // loading
      isShowSaveButtonLoading: false,
      // 上传
      upload: {
        uploadList: [],
        data: {
          type: 'NEWS_PIC'
        }
      },
      // 富文本编辑器对象
      editor: null,
      // 基础路径
      baseUrl: baseUrl,
      // 传输内容
      form: {
        // 收件人
        // toEmails: '',
        title: '',
        content: '',
        time: ''
      },
      // 验证规则
      ruleInline: {
        toEmails: [
          { required: true, message: '请输入邮箱' },
          { required: true, content: '请输入邮件内容', trigger: 'blur' },
          { required: true, message: '请输入邮件标题', trigger: 'blur' }
        ],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        time: [{ required: true, message: '请输入超时提醒天数', trigger: 'blur' }]
      }
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created () {},
  mounted () {
    this.getMessage();
    // this.getEmailDetails();
  },
  beforeCreate () {},
  beforeMount () {},
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {},
  activated () {},
  methods: {
    getMessage () {
      emailApi.timeoutInfo().then(res => {
        this.form.time = res.data.configValue;
      });
    },
    // 后退
    goBack () {
      this.$router.closeCurrentPage();
    },
    // 保存邮件
    addOrUpdateEmail () {
      let obj = {
        'id': -1,
        'configGroup': ' email',
        'configKey': 'timeout_config',
        'configName': 'TimeoutToRemind',
        'configValue': this.form.time,
        'remark': ' 邮件超时提醒'
      };
      this.$Spin.show();
      emailApi.emailConfig(obj).then(() => {
        this.$Message.success('发送成功');
        this.$Spin.hide();
      }).catch(() => {
        this.$Message.warning('发送失败');
        this.$Spin.hide();
      });
    },
    // 新增
    async addNew () {
      try {
        this.$Spin.show();
        this.isShowSaveButtonLoading = true;
        let res = await emailApi.addEmail(this.form);
        this.isShowSaveButtonLoading = false;
        this.$Spin.hide();
        this.$Message.success('发送成功');
        this.goBack();
      } catch (error) {
        // TODO zhuoda sentry
        console.error(error);
        this.isShowSaveButtonLoading = false;
        this.$Spin.hide();
      }
    },
    // 编辑
    async editEmail () {
      this.isShowSaveButtonLoading = true;
      this.$Spin.show();
      try {
        this.isShowSaveButtonLoading = false;
        this.$Spin.hide();
        this.$Message.success('编辑成功');
        this.goBack();
      } catch (error) {
        // TODO zhuoda sentry
        console.error(e);
        this.isShowSaveButtonLoading = false;
      } finally {
        this.$Spin.hide();
      }
    },
    // 获取详情
    async getEmailDetails () {
      this.$Spin.show();
      try {
        let id = this.$route.query.id;
        if (id) {
          let res = await emailApi.getEmailDetails(id);
          this.form = res.data;
          this.editor.txt.html(res.data.content);
        }
      } catch (error) {
        // TODO zhuoda sentry
        console.error(e);
      } finally {
        this.$Spin.hide();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.addressWidth {
  width: 350px;
}
.marginTop20 {
  margin-top: 20px;
}
.marginBottom20 {
  margin-bottom: 20px;
}
</style>
